<template>
<el-row :gutter="20">
  <el-col :span="8"><div><p>合同管理: <el-input
        
        placeholder="请输入合同标题"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      /> </p></div></el-col>
  <el-col :span="8"><div><p>货主单位: <el-input
        
        placeholder="请输入货主单位"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      /> </p></div></el-col>
  <el-col :span="8"><div><p>货主负责人:<el-input
        
        placeholder="请输入货主负责人"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      /></p></div></el-col>
  <el-col :span="8"><div><p>合同管理: <el-input
        
        placeholder="请输入经办人"
        class="filter-item search_input"
        @keyup.enter.native="handleFilter"
      /> </p></div></el-col>
  <el-col :span="8"><div><p>货主单位: <el-date-picker
      v-model="value2"
      type="datetime"
      placeholder="选择日期时间"
      align="right"
      :picker-options="pickerOptions">
    </el-date-picker> </p></div></el-col>
  <el-col :span="8"><div><el-button
        class="filter-item"
        type="primary"
        icon="el-icon-search"
        @click="handleFilter"
      >
        搜索
      </el-button></div></el-col>
      
</el-row>
</template>
<style>
  .el-row {
    margin-bottom: 20px;
    
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
  .search_input{
  width: 200px
}
</style>

<script>
  export default {
    data() {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        value1: '',
        value2: '',
        value3: ''
      };
    }
  };
</script>
